<template>
  <div :style="{
          width: val.w + 'px',
          height: val.h + 'px',
          overflowY: 'auto',
          border: val.borderWidth+ 'px solid '+val.borderColor,
       }">
    <component v-if="ready" :is="componentName" v-bind="options"></component>
  </div>
</template>
<script>
  import {loadView} from './utils'
  import Vue from 'vue'
  import StylePane from './style.vue'
  // import dataMixin from '../mixins/data';

  const NAME = 'vpd-component';
  export default {
    // mixins: [dataMixin],
    name: NAME,
    icon: 'vpd-cube',
    title: '组件',
    panel: StylePane,
    setting: {
      type: NAME,
      w: 600,
      h: 600,
      path: '',
      params: [],
      borderWidth: 0,
      borderColor: '#333'
    },
    props: {
      val: {
        type: Object
      }
    },
    data() {
      return {
        data: '',
        options: {},
        ready: false,
      }
    },
    computed: {
      componentName() {
        if (!this.val.path) {
          return '';
        }
        return 'vpd-component-' + this.val.path.split('/').join('-');
      }
    },
    watch: {
      'val.path': {
        handler: function (val) {
          const comp = loadView(val);
          Vue.component(this.componentName, comp);
          const query = this.$route.query || {};
          // 处理参数
          if (this.val.params) {
            this.options = this.val.params.reduce((prev, item) => {
              if (item.type === '&') { //动态参数
                prev[item.code] = query[item.value]
              } else { //静态参数
                prev[item.code] = item.value
              }
              return prev;
            }, {});
          }
          this.ready = true;
        },
        immediate: true
      }
    },
    beforeMount() {
    },
    methods: {
      updateData(data) {
        this.data = data;
      }
    }
  }
</script>
<style scoped>
  .text {
    word-break: break-all;
  }
</style>
